<template>
  <div>
    <el-row :gutter="20" class="m-t-20">
      <el-col :span="16">
        <!-- 电子地图 -->
        <EMap />
      </el-col>
      <el-col :span="8">
        <!-- 状态控制 -->
        <State />
        <!-- 移动控制 -->
        <Move />
      </el-col>
    </el-row>
    <el-row :gutter="20" class="m-t-20">
      <el-col :span="24">
        <!-- 可执行的计划列表 -->
        <PlansList />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import State from "./components/State.vue";
import EMap from "./components/EMap.vue";
import PlansList from "./components/PlansList.vue";
import Move from "./components/Move.vue";
export default {
  name: "CruiseManagement",
  components: {
    State,
    EMap,
    Move,
    PlansList,
  },
  created() {
    this.$store.dispatch('waterAnalysis/toGetAllPointQuality');
  }
};
</script>

<style scoped lang="less">
.card-header {
  /deep/ .el-card__header {
    border-left: 5px solid var(--blue);
  }
}

.header-dark {
  /deep/ .el-card__header {
    background-color: #34486e;
    color: #fff;
    border-bottom: 1px solid #34486e;
    box-sizing: border-box;
  }
}

.card-dark {
  /deep/ .el-card__body {
    background-color: var(--dark);
    color: #fff;
  }
}
</style>